// 学习目标：使用useRef钩子函数，创建ref对象 - 使用ref存储定时器
// 学习目标：useRef和useState的区别
//   1. useState 作用声明状态
//   2. useRef 类似临时变量，常用来存储数据。它不能用来驱动视图 
// 作用：与React.createRef的作用完全相同 3.ref可以保存数据 1.获取DOM.获取组件实例对象

// 1、导入useRef钩子函数
import React, { useEffect, useState, useRef } from 'react';


export default function App() {
    // 准备组件的显示与隐藏
    const [isShow, setIsShow] = useState(true);
    return (
        <div>
            我是App组件
            {isShow && <Child></Child>}
            <button onClick={() => setIsShow(!isShow)}>点击卸载子组件</button>
        </div>
    );
}


function Child() {
    // 使用ref存储定时器
    // 2、调用useRef钩子函数，得到一个ref对象
    const timerRef = useRef()

    useEffect(() => {
        // 3、使用ref对象.current绑定对应的数据
        timerRef.current = setInterval(() => {
            console.log('定时器开启了');
        }, 100)
        return () => {
            clearInterval(timerRef.current)
        }
    }, [])

    return <h1>我是子组件</h1>

}
